<template>
    <div class="user-profile-container">
        <div class="profile-container">
            <div class="avatar-container">
                <el-upload class="avatar-uploader" 
                           action="http://localhost:8081/api/upload" 
                           :show-file-list="false"
                           :on-success="handleAvatarSuccess" 
                           :before-upload="beforeAvatarUpload">
                    <img v-if="tempAvatarUrl" 
                         :src="tempAvatarUrl" 
                         class="avatar"
                         :fit="fit" />
                    <el-icon v-else 
                             class="icon iconfont icon-xiugaitouxiang">
                        <plus />
                    </el-icon>
                </el-upload>
                <div class="nickname">{{ newNickName }}</div>
            </div>
            <div class="info-container">
                <div class="info-item">
                    <div class="info-label">昵称</div>
                    <div class="info-value">
                        <span class="info-text">{{ newNickName }}</span>
                        <i class="icon iconfont icon-edit" @click="editNickName"></i>
                    </div>
                </div>
                <div class="info-item">
                    <div class="info-label">邮箱</div>
                    <div class="info-value">
                        <span class="info-text">{{ newEmail }}</span>
                        <i class="icon iconfont icon-edit" @click="editEmail"></i>
                    </div>
                </div>
                <div class="info-item">
                    <div class="info-label">电话</div>
                    <div class="info-value">
                        <span class="info-text">{{ newPhone }}</span>
                        <i class="icon iconfont icon-edit" @click="editPhone"></i>
                    </div>
                </div>
                <div class="info-item">
                    <div class="info-label">密码</div>
                    <div class="info-value">
                        <span class="info-text">********</span>
                        <i class="icon iconfont icon-edit" @click="editPassword"></i>
                    </div>
                </div>
                <div class="action-buttons">
                    <el-button @click="cancelChanges">
                        取消
                    </el-button>
                    <el-button type="primary" @click="saveChanges">
                        保存
                    </el-button>
                </div>
            </div>
        </div>

        <div class="todo-container">
            <div class="todo-header">
                <div class="title">代办事项</div>
                <div class="add-todo-icon" @click="addNewTodo">
                    <i class="icon iconfont icon-plus"></i>
                </div>
            </div>
            <div class="todo-list">
                <el-card v-for="(item, index) in todoList" 
                         :key="index" 
                         class="todo-card" 
                         shadow="hover">
                    <div class="card-body">
                        <div class="card-title">{{ item.title }}</div>
                        <div class="card-desc">{{ item.desc }}</div>
                    </div>
                    <div class="card-footer">
                        <div class="card-date">{{ item.date }}</div>
                        <div class="card-actions">
                            <i class="icon iconfont icon-edit card-action-item" @click="editTodoItem(index)"></i>
                            <i class="icon iconfont icon-delete card-action-item" @click="deleteTodoItem(index)"></i>
                        </div>
                    </div>
                </el-card>
                <!-- 添加待办事件的小卡片 -->
                <el-card
                    v-show="showAddCard"
                    class="todo-card add-card"
                    @click="addNewTodo"
                    >
                    <div class="card-body">
                        <i class="icon iconfont icon-add"></i>
                        <div class="card-title">添加待办事件</div>
                    </div>
                </el-card>
            </div>
        </div>
    </div>

    <!-- 修改数据dialog -->
    <el-dialog v-model="dialogFormVisible" :title="changeTitle">
        <el-form :model="form">
            <el-form-item :label="changeLabel" 
                          :label-width="formLabelWidth">
                <el-input v-model="form.value" 
                          autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cencleDialog">取消</el-button>
                <el-button type="primary" @click="saveDialogData">确定</el-button>
            </span>
        </template>
    </el-dialog>

    <!-- 修改密码dialog -->
    <el-dialog v-model="dialogFormVisiblePassword" :title="changeTitle">
    <el-form :model="form" ref="formData">
      <el-form-item :label="changeLabel" :label-width="formLabelWidth">
        <el-input v-model="form.value" autocomplete="off" placeholder="请输入原密码" show-password></el-input>
      </el-form-item>
      <el-form-item :label="changeLabel1" :label-width="formLabelWidth">
        <el-input v-model="newPassword" autocomplete="off" placeholder="请输入新密码" show-password></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cencleDialog">取消</el-button>
        <el-button type="primary" @click="saveDialogData">确定</el-button>
      </div>
    </template>
  </el-dialog>

    <!-- 修改代办dialog -->
    <el-dialog v-model="dialogFormVisibleTodo" :title="changeTitle">
    <el-form :model="form" ref="formData">
      <el-form-item :label="changeLabel" :label-width="formLabelWidth">
        <el-input v-model="form.value" autocomplete="off" placeholder="请输入原密码" show-password></el-input>
      </el-form-item>
      <el-form-item :label="changeLabel1" :label-width="formLabelWidth">
        <el-input v-model="newPassword" type = "textarea" autocomplete="off" placeholder="请输入新密码" show-password></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cencleDialog">取消</el-button>
        <el-button type="primary" @click="saveDialogData">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
  
<script setup>
import axios from "axios";
import { reactive, ref, getCurrentInstance } from "vue";
import VueCookies from 'vue-cookies'
import { useRouter } from "vue-router";
import { onMounted } from 'vue';

const { proxy } = getCurrentInstance();
const router = useRouter();

const dialogFormVisible = ref(false);
const dialogFormVisiblePassword = ref(false);
const dialogFormVisibleTodo = ref(false);
const formLabelWidth = "100px";

const changeTitle = ref(''); // 弹框标题
const changeLabel = ref(''); // 输入框的标题
const changeLabel1 = ref('');

// 记录旧数据
const avatarUrl = ref(''); // 用户头像
const nickName = ref(''); // 昵称
const email = ref(''); // 邮箱
const phone = ref(''); // 电话

// 临时头像数据
const tempAvatarUrl = ref('')

// 记录新数据
const newPassword = ref(''); // 新密码
const newAvatarUrl = ref(''); // 新用户头像
const newNickName = ref(''); // 新昵称
const newEmail = ref(''); // 新邮箱
const newPhone = ref(''); // 新电话

// 获取信息
const loginInfo = VueCookies.get("loginInfo");
const account = loginInfo ? loginInfo.account : null; // 如果 loginInfo 存在，则从中取出 account 字段，否则返回 null
const accessToInformation = async() => {
    const url = "http://localhost:8081/api/accessInformation";
    const data = {
        userAccount : account,
    }
    try{
        const res = await axios.post (url, data);
        if(res.data.code === 2000)
        {
            avatarUrl.value = res.data.avatar;
            nickName.value = res.data.nickName;
            email.value = res.data.email;
            phone.value = res.data.phone;
            
            tempAvatarUrl.value = avatarUrl.value;
            newAvatarUrl.value = avatarUrl.value;
            newNickName.value = nickName.value;
            newEmail.value = email.value;
            newPhone.value = phone.value;
        }else {
            proxy.$message.error(res.data.message);
        }
    }catch(e){
        proxy.$message.error('个人信息获取失败');
    }
}

const form = reactive({
    value: "",
});

const todoList = reactive([
    {
        title: "完成vue项目",
        desc: "本周完成vue项目，并部署到服务器上。",
        date: "2023-06-01",
    },
    {
        title: "学习新技术",
        desc: "学习GraphQL，并实现一个简单的后端服务。",
        date: "2023-06-10",
    },
    // {
    //     title: "参加技术分享会",
    //     desc: "参加公司的技术分享会，并发表一篇技术分享论文。",
    //     date: "2023-06-15",
    // },
]);

// 上传文件的逻辑处理
const handleAvatarSuccess = async function (response, uploadFile) {
	tempAvatarUrl.value = URL.createObjectURL(uploadFile.raw)
    newAvatarUrl.value = response.url;
}

const beforeAvatarUpload = function (rawFile) {
	// if (rawFile.type !== 'image/jpeg' || rawFile.type !== 'image/jpg' || rawFile.type !== 'image.png') {
	// 	alert('只能上传jpeg, jpg, png类型的图片')
	// 	return false
	// } else 
	if (rawFile.size / 1024 / 1024 > 10) {
		alert('图片大小不能超过2MB!');
		return false;
	}

	return true
}

// 编辑昵称
function editNickName() {
    changeTitle.value = "编辑昵称";
    changeLabel.value = "新昵称";
    form.value = newNickName.value;
    dialogFormVisible.value = true;
}

// 编辑邮箱
function editEmail() {
    changeTitle.value = "编辑邮箱";
    changeLabel.value = "新邮箱";
    form.value = newEmail.value;
    dialogFormVisible.value = true;
}

// 编辑电话
function editPhone() {
    changeTitle.value = "编辑电话";
    changeLabel.value = "新电话";
    form.value = newPhone.value;
    dialogFormVisible.value = true;
}

// 编辑密码
function editPassword() {
    changeTitle.value = "修改密码";
    changeLabel.value = "旧密码";
    changeLabel1.value = "新密码";
    dialogFormVisiblePassword.value = true;
}

// 保存修改
async function saveChanges() {
    // TODO: 保存修改的逻辑
    // console.log("保存修改");
    const url = 'http://localhost:8081/api/modifyPersonalInformation'
    const data = {
        userAccount : account,
        nickName : newNickName.value,
        email : newEmail.value,
        phone : newPhone.value,
        avatar : newAvatarUrl.value,
    }
    console.log(newAvatarUrl.value);
    try{
        const res = await axios.post(url, data);
        if(res.data.code === 2000)
        {
            proxy.$message.success(res.data.message);
            accessToInformation();
        }else {
            proxy.$message.error(res.data.message);
        }
    }catch(e){
        proxy.$message.error("修改出错!");
    }
}

// 取消修改
function cancelChanges() {
    // TODO: 取消修改的逻辑
    // console.log("取消修改");
    tempAvatarUrl.value = avatarUrl.value;
    newAvatarUrl.value = avatarUrl.value;
    newNickName.value = nickName.value;
    newEmail.value = email.value;
    newPhone.value = phone.value;
}

// 保存对话框中的数据
function saveDialogData() {
    if(changeTitle.value === "编辑昵称"){
        newNickName.value = form.value;
        console.log(newNickName.value);
    }else if (changeTitle.value === "编辑邮箱") {
        newEmail.value = form.value;
    } else if (changeTitle.value === "编辑电话") {
        newPhone.value = form.value;
    }
    dialogFormVisible.value = false;
    dialogFormVisiblePassword.value = false;
    dialogFormVisibleTodo.value = false;
    form.value = '';
}

// 打开新增代办事项的弹框
function addNewTodo() {
    changeTitle.value = "新建代办事项";
    changeLabel.value = "标题";
    form.value = "";
    changeLabel1.value = "内容";
    dialogFormVisibleTodo.value = true;
}

// 打开编辑代办事项的弹框
function editTodoItem(index) {
    changeTitle.value = "编辑代办事项";
    changeLabel.value = "标题";
    form.value = todoList[index].title;
    changeLabel1.value = "内容";
    dialogFormVisibleTodo.value = true;
}

// 关闭对话框
function cencleDialog(){
    dialogFormVisible.value = false;
    dialogFormVisiblePassword.value = false;
    dialogFormVisibleTodo.value = false;
    changeTitle.value = ''; // 弹框标题
    changeLabel.value = ''; // 输入框的标题
    changeLabel1.value = '';
    form.value = '';
}

// 删除代办事项
function deleteTodoItem(index) {
    todoList.splice(index, 1);
}



onMounted(() => {
    accessToInformation();
});
</script>
  
<style lang="scss" scoped>
.user-profile-container {
    display: flex;
    width: 90%;
    margin: 0 auto;
    justify-content: space-between;
}

.profile-container {
    width: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #e4e7ed;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 20px;
    background-color: #fff;
}

.avatar-container {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 10px;
    cursor: pointer;
}

.avatar-uploader {
    justify-content: center;
    align-items: center;
    font-size: 32px;
    font-weight: bold;
    color: #fff;
    background-color: #409eff;
    width: 100%;
    height: 100%;

    .el-icon {
        font-size: 48px;
        margin-right: 10px;
    }

    img {
        display: block;
        margin: 0 auto;
    }
}


.avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nickname {
    font-size: 18px;
    margin-top: 10px;
    color: #303133;
}

.info-container {
    width: 100%;
    padding: 0 20px;
}

.info-item {
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e4e7ed;
    padding: 0 10px;
}

.info-label {
    font-size: 16px;
    color: #303133;
}

.info-value {
    display: flex;
    align-items: center;
}

.info-text {
    font-size: 14px;
    color: #909399;
    margin-right: 10px;
}

.icon-edit {
    font-size: 18px;
    color: #c0c4cc;
    cursor: pointer;
}

.action-buttons {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.btn {
    margin: 0 10px;
    height: 36px;
    font-size: 14px;
}

.save-btn {
    background-color: #409eff;
    border-color: #409eff;
}

.cancel-btn {
    background-color: #c0c4cc;
    border-color: #c0c4cc;
}

.todo-container {
    width: 50%;
    border: 1px solid #e4e7ed;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    background-color: #fff;
    margin-left: 20px;
    padding: 20px;
}

.todo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.title {
    font-size: 18px;
    color: #303133;
}

.add-todo-icon {
    font-size: 20px;
    color: #409eff;
    cursor: pointer;
}

.todo-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.todo-card {
    min-height: 150px;
}

.card-title {
    font-size: 16px;
    font-weight: bold;
    color: #303133;
    margin-bottom: 10px;
}

.card-desc {
    font-size: 14px;
    color: #606266;
    margin-bottom: 15px;
    line-height: 1.5;
    height: 60px;
    overflow: hidden;
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    font-size: 12px;
    color: #909399;
}

.card-date {
    margin-right: 10px;
}

.card-actions {
    display: flex;
}

.card-action-item {
    font-size: 14px;
    margin-left: 10px;
    color: #c0c4cc;
    cursor: pointer;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.avatar-uploader {
	width: 190px;

    el-icon {
        font-size: 28px;
		color: #8c939d;
		text-align: center;
		width: 200px;
		height: 150px;
		line-height: 150px;
	}
}
</style>